<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* #bg {
      position: fixed;
      top: 100%;
    } */
  </style>
</head>

<body>
  <canvas id="bg" width="941" height="350"></canvas>
  <script>
    function drawText(ctx, text, x, y, maxWidth, lineHeight) {
      let canvas = ctx.canvas;
      let arrText = text.split('');
      let line = '';
      for (let n = 0; n < arrText.length; n++) {
        let testLine = line + arrText[n];
        let metrics = ctx.measureText(testLine);
        let testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
          ctx.fillText(line, x, y);
          line = arrText[n];
          y += lineHeight;
        } else {
          line = testLine;
        }
      }
      ctx.fillText(line, x, y);
    }
    // 预制
    let bgs = [
      '/begin/image/no-ticket1-11.png',
      '/begin/image/ticket-site1-1.png',
    ]
    // 当前数据
    let now = 1
    let user = {
      name: '吴恩永',
      site: 3
    }
    let statement = ["2020你更享受说走就走的自有。轮胎半径不足半米，人生的半径大了止好几环——去更好的远方"]
    let state = 0
    // 绘画
    let bg = document.getElementById("bg")
    let ctx = bg.getContext('2d')
    let bgimg = new Image();
    bgimg.src = bgs[now]
    bgimg.onload = () => {
      ctx.drawImage(bgimg, 0, 0, 941, 350)
      ctx.fillStyle = "#e8bb99";
      ctx.font = '60px sans-serif'
      ctx.fillText(user.name, 120, 175, 220)
      now && ctx.fillText(user.site, 460, 180, 160)
      ctx.font = '14px sans-serif'
      drawText(ctx, statement[state], 444, 255, 170, 18)
      let img = new Image()
      img.src = bg.toDataURL("image/png");
      img.style.width = '300px'
      document.body.append(img)
    }
  </script>
</body>

</html>